<template>
	<view class="current">
		<Chart class="current-chart" :options="options" category="day" :params="params"/>
	</view>
</template>

<script>
	import Chart from '@/components/custom/chart/echart.vue'
	import moment from 'moment'
	import { getDayData } from './index.js'
	
	export default {
		components: {
			Chart,
		},
		data() {
			return {
				options: {
					animation: false,
					legend: {
						top: '2%',
						right: '0',
						icon: "circle",
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: '#333',
							fontSize: 14,
						},
						data: [{
							name: '进水',
						},{
							name: '出水'
						}],
					},
					dataZoom: { // 放大和缩放
						type: 'inside'
					},
					tooltip: {
						trigger: 'axis',
						confine: true,
					},
					grid: {
						top: '15%',
						left: '13%',
						bottom: '16%',
						right: '5%'
					},
					xAxis: [{
						type: 'time',
						min: '',
						max: '',
						minInterval: 24,
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							format: 'xLabelFormat'
						},
						splitLine: {
							show: false,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#666'
							},
						},
					}],
					yAxis: {
						type: 'value',
						name: '',
						nameTextStyle: {
							color: '#666',
							padding: [0, 0, 0, 0],
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#666'
							},
						},
					},
					series: [{
						name: '进水',
						data: [],
						type: 'line',
						itemStyle: {
							normal: {
								width: 1,
								color: '#fbb034',
							},
						},
						z: 0,
						zlevel: 0,
						symbol: 'none',
						label: {
							show: false,
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: '#fbb034',
									},
									{
										offset: 0.8,
										color: 'rgba(255, 222, 181, 0.5)',
									}
								],
								global: false
							}
						},
					},{
						name: '出水',
						data: [],
						type: 'line',
						itemStyle: {
							normal: {
								width: 1,
								color: '#00aaff',
							},
						},
						z: 1,
						zlevel: 1,
						symbol: 'none',
						label: {
							show: false,
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: '#00aaff',
									},
									{
										offset: 0.8,
										color: 'rgba(0, 170, 255, 0.1)',
									}
								],
								global: false
							}
						},
					}]
				},
			}
		},
		onLoad(option) {
			// // #ifdef APP-PLUS
			//    plus.screen.lockOrientation('landscape-primary');//设置横屏
			// // #endif
			if(option.data.length > 0) {
				let data = JSON.parse(option.data);
				this.params = data.params;
				getDayData(moment().format('YYYY-MM-DD'),this.params.in)
				getDayData(moment().format('YYYY-MM-DD'),this.params.out)
				uni.setNavigationBarTitle({
					title: data.text
				});
			}
			uni.$on(this.params.in,res => {
				let data = res.map(item => {
					return {
						value: [moment(item.DateTime).format('x') * 1, (item.Val * 1).toFixed(2)]
					}
				})
				this.options.xAxis[0].min = moment().format('YYYY-MM-DD') + ' 00:00';
				this.options.xAxis[0].max = moment().format('YYYY-MM-DD') + ' 23:59';
				this.options.series[0].data = data;
			})
			uni.$on(this.params.out,res => {
				let data = res.map(item => {
					return {
						value: [moment(item.DateTime).format('x') * 1, (item.Val * 1).toFixed(2)]
					}
				})
				this.options.series[1].data = data;
			})
		},
		onUnload() {
			uni.$off(this.params.in)
			uni.$off(this.params.out)
			// // #ifdef APP-PLUS
			//    plus.screen.lockOrientation('portrait-primary');
			// // #endif
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.current {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #fff;
	}
	
	.current-chart {
		width: 100% !important;
		height: 100vh !important;
		margin: 0;
	}
</style>
